<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Map 2</title>
	<style type="text/css">
		#map {
			width: 700px;
			height: 500px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
	(function() {
		window.onload = function() {
			var options = {
				zoom: 3,
				center: new google.maps.LatLng(37.09, -95.71),
				mapTypeId: google.maps.MapTypeId.ROADMAP
			}
			var map = new google.maps.Map(document.getElementById("map"), options);
			var places = [];
			places.push(new google.maps.LatLng(40.756, -73.986));
			places.push(new google.maps.LatLng(37.775, -122.419));
			places.push(new google.maps.LatLng(47.620, -122.347));
			places.push(new google.maps.LatLng(-22.933, -43.184));
			var info;
			var bounds = new google.maps.LatLngBounds();
			for (var i = 0; i < places.length; i++) {
				var marker = new google.maps.Marker({
					position: places[i],
					map: map,
					title: 'Place number ' + i
				});
				bounds.extend(places[i]);
				(function(i, marker) {
					google.maps.event.addListener(marker, 'click', function() {
						if (!info) {
							info = new google.maps.InfoWindow();
						}
						info.setContent('Place number ' + i);
						info.open(map, marker);
					});
				})(i, marker);
			}
			map.fitBounds(bounds);
//			var bounds = new google.maps.LatLngBounds(
//					new google.maps.LatLng(37.775,-122.419),
//					new google.maps.LatLng(47.620,-73.986)
//			);

		};
	})();
</script>
</body>
</html>